<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
			  <el-breadcrumb-item>考生管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				<router-link to="/examoverview" active-class="hover">考试概览</router-link>
				<router-link to="/studentmanage" active-class="hover">考生管理</router-link>
				<router-link to="/teachermanage" active-class="hover">评阅教师管理</router-link>
				<router-link to="/scorerelease" active-class="hover">成绩管理</router-link>
			</div>
			<div class="overviewcontent">
				<div class="overvcontentTop">
					<div>
						<h3 style="font-weight: bold;">{{examlist.name}}</h3>
						<div class="examInfo">
							<b><i>时间：</i>{{examlist.startTime | formatDate}}</b>
							<b>
								<i>年级：</i>
								<em v-if=" examlist.studentRange.length===0">--</em>
								<em v-for="item in examlist.studentRange" v-else>{{item.gradeName?item.gradeName:'--'}}</em>
							</b>
							<b><i>考试模式：</i>{{examlist.optionalName}}</b>
							<b><i>上传方式：</i>本地识别后上传</b>
							<b><i>评阅方式：</i>{{examlist.markHubType==1?'全校阅卷':examlist.markHubType==2?'分班阅卷':examlist.markHubType==3?'导入成绩':examlist.markHubType==4?'先批后扫':'线上考试'}}</b>
						</div>
					</div>
					<span @click="addExam(examlist)">编辑考试</span>
				</div>
				<div class="studentSearch">
					<el-select v-model="gradeId" placeholder="学部/年级" @change="xbchange" clearable>
					    <el-option
					      v-for="item in gradelist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
					<el-select v-model="setvalue" placeholder="班级" @change="classchange" clearable>
					    <el-option
					      v-for="item in classlist"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
					<el-input placeholder="准考证号" v-model="studentObj.query.eamxNumber" @change="examchange" clearable></el-input>
					<el-input placeholder="学生姓名" v-model="studentObj.query.studentName" @change="studentchange" clearable></el-input>
				</div>
				<div class="tableContent" v-if="studentlist.length">
					<el-table
						class="custom-table"
					    ref="multipleSelection"
					    :data="studentlist"
					    tooltip-effect="dark"
					    style="width: 100%"
					    @selection-change="handleSelectionChange"
						stripe
						:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
					    <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <el-table-column
					      label="ID"
						    width="150">
					      <template slot-scope="scope">{{ scope.row.stuId }}</template>
					    </el-table-column>
					    <el-table-column
					      prop="name"
					      label="姓名">
					    </el-table-column>
					    <el-table-column
					      prop="studentNumber"
					      label="学号">
					    </el-table-column>
						<el-table-column
						  label="准考证号"
						  width="100">
						  <template slot-scope="scope">
							  {{scope.row.examNumber}}
						  </template>
						</el-table-column>
						<el-table-column
						  label="学部">
						  <template slot-scope="scope" v-if="scope.row.period!=null">{{scope.row.period.name }}</template>
						  <template slot-scope="scope" v-else>--</template>
						</el-table-column>
						<el-table-column
						  label="班级">
						  <template slot-scope="scope" v-if="scope.row.class!=null&&scope.row.grade!=null">{{ scope.row.class.name +'/'+scope.row.grade.name}}</template>
							<template slot-scope="scope" v-else>--</template>
						</el-table-column>
						<el-table-column
						  label="选科"
						    width="200">
						  <template slot-scope="scope">
							  <ul class="answerlist">
								  <li v-for="item in scope.row.courses">{{item.coursesName}}</li>
							  </ul>
						  </template>
						</el-table-column>
						<el-table-column
						  label="小语种">
						  <template slot-scope="scope">
							  <span class="smallsubject" v-for="item in scope.row.languages">{{item.name}}</span>
						  </template>
						</el-table-column>
						<el-table-column
							fixed="right"
							label="操作"
							align="center"
							width="150">
							<template slot-scope="scope">
								<div style="display: flex;">
									<el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />编辑</el-button>
									<el-button @click="deletestudent(scope.row.stuId)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button>
								</div>
							</template>
						</el-table-column>
					  </el-table>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent">
				<div class="totaldata">
					<span>已选<i>{{multipleSelection.length}}</i>项 / 共{{total}}项</span>
					<em @click="chooseStudenttab">选择学生</em>
					<em @click="addExamcopy">名单复用</em>
					<!-- <em @click="addsinglestudent">单个添加</em>
					<em @click="batchImporttab">批量导入</em> -->
					<em @click="batchStudent">批量删除</em>
				</div>
				<div>
					<el-pagination
						background
					      @current-change="handleCurrentChange"
					      layout="prev, pager, next, jumper"
						  :page-size="pageSize"
					      :total="total">
					    </el-pagination>
				</div>
			</div>
		</div>
		<examEdite v-if="addExamIshow" @addexamclick="addexamclick" :examobj="examobj" :addexamtype="addexamtype"></examEdite>
		<!-- 选择学生 -->
		<div class="addExamMain" v-if="choosestudentIshow">
			<div class="addExamContent">
				<h3>选择学生范围</h3>
				<div class="choosestudent">
					<span style="width:71px;">选择年级：</span>
					<div class="inputBox">
						<el-select v-model="gradeidlist" multiple placeholder="请选择年级" @remove-tag="removtag">
						  <el-option
							v-for="item in gradelist"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							 @click.native="selectStudentchange">
						  </el-option>
						</el-select>
					</div>
				</div>
				<div>
				    <div v-for="(student, index) in studentSlectlist" :key="index" class="checkbox-group">
				      <el-checkbox :indeterminate="isIndeterminate(student)" :checked="student.checkedAll" @change="handleCheckAllChange(student, $event)">{{student.name}}</el-checkbox>
				      <el-checkbox-group v-model="student.selected" class="horizontal-checkbox-group">
				        <el-checkbox
				          v-for="option in student.options"
						  :key="option.id"
				          :label="option.id">
				          {{ option.name }}
				        </el-checkbox>
				      </el-checkbox-group>
				    </div>
				  </div>
				  <div class="groupbutton">
				  	<el-button type="primary" @click="studentsure">确定</el-button>
				  	<el-button type="primary" @click="goback">返回</el-button>
				  </div>
			</div>
		</div>
		<!-- 创建编辑学生 -->
		<div class="addExamMain" v-if="exditstudentIshow">
			<div class="addExamContent">
				<h3>创建/编辑学生</h3>
				<ul>
					<li>
						<span>ID：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.id" placeholder="请输入内容" @input="handleInput"></el-input>
						</div>
					</li>
					<li>
						<span>学生姓名：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.name" placeholder="请输入内容" @input="handleInput"></el-input>
						</div>
					</li>
					<li>
						<span>学号：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.xh" placeholder="请输入内容" @input="handleInput"></el-input>
						</div>
					</li>
					<li>
						<span>准考证号：</span>
						<div class="inputBox">
							<el-input v-model="exitStudent.examnumber" placeholder="请输入内容" @input="handleInput"></el-input>
						</div>
					</li>
					<li>
						<span>学部：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xb" placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>年级：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.grade" placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>班级：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.class" placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>选科：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.xk" multiples placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li>
						<span>小语种：</span>
						<div class="inputBox">
							<el-select v-model="exitStudent.smallyz" placeholder="请选择">
							  <el-option
								v-for="item in gradelist"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							  </el-option>
							</el-select>
						</div>
					</li>
					<li style="color:red;" v-if="attentionIshow">
						<span></span>
						<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
					</li>
				</ul>
				<div class="groupbutton">
					<el-button type="primary" @click="exditstudentsure">保存</el-button>
					<el-button type="primary" @click="exditstudentgoback">返回</el-button>
				</div>
			</div>
		</div>
		<!-- 批量导入 -->
		<div class="addExamMain" v-if="batcImportIshow">
			<div class="addExamContent">
				<h3>批量上传临时学生</h3>
				<div class="uploadbox">
					<el-upload
					  class="upload-demo"
					  drag
					  action="https://jsonplaceholder.typicode.com/posts/">
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					  <div class="el-upload__tip" slot="tip">每次导入仅能上传一个文件</div>
					</el-upload>
					<a href="#" class="downmoban">下载模板</a>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="batcImportsure">确认</el-button>
					<el-button type="primary" @click="batcImportgoback">取消</el-button>
				</div>
			</div>
		</div>
		<!-- 创建复用考试 -->
		<examCopy v-if="examCopyIshow" @copyexamclick="copyexamclick" :type="1"></examCopy>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import examEdite from '../../components/school/exditexam.vue'
	import examCopy from '../../components/school/copyexam.vue'
	import { get, post, del, put } from '../../request/api.js'
	export default{
		data(){
			return{
				addExamIshow:false,	
				studentlist:[],
				gradelist:[],
				classlist:[],
				currentPage3:4,
				gradeId:'',
				studentSlectlist: [],
				  choosestudentIshow:false,
				  exitStudent:{
					  id:'',
					  name:'',
					  xh:'',
					  examnumber:'',
					  xb:'',
					  grade:'',
					  class:'',
					  xk:'',
					  smallyz:''
				  },
				  exditstudentIshow:false,
				  batcImportIshow:false,
				  examlist:{},
				  examobj:{},
				  examobjcontent:{},
				  page:1,
				  pageSize:10,
				  studentObj:{
					query:{
						examId:'',
						classIds:[],
						eamxNumber:'',
						studentName:'',
						gradeId:0
					}
				},
				setvalue:'',
				total:0,
				 multipleSelection: [],
				 selectstudent:{
					 examId:'',
					 classIds:[]
				 },
				 gradenamelist:[],
				 classlistdata:[],
				 gradeidlist:[],
				 examCopyIshow:false,
			}
		},
		mounted() {
			this.examobjcontent = JSON.parse(sessionStorage.getItem('examContent'))
			this.examoverive(this.examobjcontent.id)
			this.studentObjlist()
			//获取年级列表
			this.gradelisttab()
			//获取班级列表
			this.classlisttab()
		},
		methods:{
			//删除学生
			deletestudent(id){
				let obj={
					id:this.examobjcontent.id,
					ids:[id]
				}
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
							post('/examstudent/batchdelte',obj)
							.then(res=>{
								if(res.code==200){
									this.$message({
									  type: 'success',
									  message: '删除成功!'
									});
									this.studentObjlist()
								}else{
									this.$message({
									  type: 'error',
									  message: res.message
									});
								}
							})
							.catch(error=>{
								this.$message({
								  type: 'error',
								  message: error.message
								});
							})
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				        });          
				})
			},
			// 批量删除学生
			batchStudent(){
				if(this.multipleSelection.length>0){
					let obj={
						id:this.examobjcontent.id,
						ids:this.multipleSelection.map(item=>item.stuId)
					}
					 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					          confirmButtonText: '确定',
					          cancelButtonText: '取消',
					          type: 'warning'
					        }).then(() => {
								post('/examstudent/batchdelte',obj)
								.then(res=>{
									if(res.code==200){
										this.$message({
										  type: 'success',
										  message: '删除成功!'
										});
										this.studentObjlist()
									}else{
										this.$message({
										  type: 'error',
										  message: res.message
										});
									}
								})
								.catch(error=>{
									this.$message({
									  type: 'error',
									  message: error.message
									});
								})
					        }).catch(() => {
					          this.$message({
					            type: 'info',
					            message: '已取消删除'
					        });          
					})
				}else{
					this.$message({
					  type: 'warning',
					  message:'请先选择要删除的内容'
					});
				}
			},
			copyexamclick(data){
				this.examCopyIshow = data
				this.studentObjlist()
			},
			addExamcopy(){
				this.examCopyIshow = true
			},
			examoverive(id){
				get('/exam/details', { examId: id })
				.then(res => {
					if(res.code==200){
						this.examlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					  // 处理错误
					  this.$message.error(error.message);
				});
			},
			// 新建考试
			addExam(obj){
				this.examobj=obj
				this.addExamIshow = true
			},
			addexamclick(data){
				if(data=='返回'){
					this.addExamIshow=false
				}else{
					this.examoverive(this.examobjcontent.id)
					this.addExamIshow=data
				}
			},
			// 获取学生列表
			studentObjlist(){
				this.studentObj.query.examId = this.examobjcontent.id
				this.studentObj.query.classIds = this.setvalue?[this.setvalue]:[]
				this.studentObj.query.gradeId = this.gradeId?this.gradeId:0
				this.studentObj.pageSize = this.pageSize
				post('/examstudent/list',this.studentObj)
				.then(res=>{
					if(res.code==200){
						//console.info(res)
						this.studentlist = res.data.items
						this.total = res.data.total
					}else{
						this.$message.error(res.message);
					}
					
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			//获取年纪列表
			gradelisttab(){
				get('/grade/list')
				.then(res=>{
					if(res.code==200){
						this.gradelist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			//获取班级列表
			classlisttab(){
				get('/classes/list')
				.then(res=>{
					if(res.code==200){
						this.classlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
				
			},
			xbchange(val){
				this.studentObjlist()
				if(val){
					get('/grade/classlist',{gradeId:val})
					.then(res=>{
						if(res.code==200){
							this.classlist = res.data
						}else{
							this.$message.error(res.message);
						}
					})
					.catch(error=>{
						this.$message.error(error.message);
					})
				}else{
					get('/classes/list')
					.then(res=>{
						if(res.code==200){
							this.classlist = res.data
						}else{
							this.$message.error(res.message);
						}
					})
					.catch(error=>{
						this.$message.error(error.message);
					})
				}
			},
			classchange(val){
				// this.studentObj.query.classIds = [val]
				this.studentObjlist()
			},
			examchange(){
				this.studentObjlist()
			},
			studentchange(){
				this.studentObjlist()
			},
			handleCurrentChange(val){
				this.studentObj.page = val
				this.studentObjlist()
			},
			handleSizeChange(val){
				this.studentObj.pageSize = val
				this.studentObjlist()
			},
			handleSelectionChange(val){
				 this.multipleSelection = val;
			},
			// 跳转不同页面
			routerlink(link){
				this.$router.push(link)
			},
			//选择学生确定
			studentsure(){
				this.selectstudent.classIds = this.studentSlectlist.reduce((acc, item) => { return acc.concat(item.selected);}, []);
				this.selectstudent.examId = this.examobjcontent.id
				//console.info(this.selectstudent.classIds)
				post('/exam/selectstu',this.selectstudent)
				.then(res=>{
					if(res.code==200){
						this.studentObjlist()
						this.choosestudentIshow = false
					}else{
						this.$message({
							type: 'error',
							message: res.message
						});
					}
				})
				.catch(error=>{
					
				})
			},
			//选择学生返回
			goback(){
				this.choosestudentIshow = false
			},
			chooseStudenttab(){
				this.choosestudentIshow = true
			},
			selectStudentchange(val){
				// //console.info(this.gradeidlist)
				// this.gradelist
				let classobj = [];
				const promises = [];
				for (let id of this.gradeidlist) {
				    promises.push(
				      get('/grade/classlist', { gradeId: id })
				        .then(res => {
				          if (res.code === 200) {
				            return {
				              name: this.gradelist.filter(item => item.id === id)[0].name,
				              options: res.data,
				              selected: [],
				              checkedAll: false,
				            };
				          } else {
				            throw new Error('请求失败');
				          }
				        })
				        .catch(error => {
				          console.error(`Error fetching data for grade ${id}:`, error);
				        })
				    );
				}
				Promise.all(promises).then(results => {
				    this.studentSlectlist = results.filter(result => result); // 过滤掉未成功获取的数据
				    // //console.info(this.studentSlectlist);
				});
			},
			removtag(removedTag){
				let classobj = [];
				const promises = [];
				for (let id of this.gradeidlist) {
				    promises.push(
				      get('/grade/classlist', { gradeId: id })
				        .then(res => {
				          if (res.code === 200) {
				            return {
				              name: this.gradelist.filter(item => item.id === id)[0].name,
				              options: res.data,
				              selected: [],
				              checkedAll: false,
				            };
				          } else {
				            throw new Error('请求失败');
				          }
				        })
				        .catch(error => {
				          console.error(`Error fetching data for grade ${id}:`, error);
				        })
				    );
				}
				Promise.all(promises).then(results => {
				    this.studentSlectlist = results.filter(result => result); // 过滤掉未成功获取的数据
				    // //console.info(this.studentSlectlist);
				});
			},
			exditstudentsure(){
				this.exditstudentIshow = false
			},
			exditstudentgoback(){
				this.exditstudentIshow = false
			},
			addsinglestudent(){
				this.exditstudentIshow = true
			},
			batcImportsure(){
				this.batcImportIshow = false
			},
			batcImportgoback(){
				this.batcImportIshow = false
			},
			batchImporttab(){
				this.batcImportIshow = true
			},
			isIndeterminate(student) {
			  return student.selected.length > 0 && student.selected.length < student.options.length;
			},
			handleCheckAllChange(student, checked) {
			  student.selected = checked ? student.options.map(option => option.id) : [];
			  student.checkedAll = checked;
			},
			handleSingleCheckChange(student) {
			  const selectedLength = student.selected.length;
			  student.checkedAll = selectedLength === student.options.length;
			},
		},
		components:{navTop,examEdite,examCopy}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:30px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.overviewcontent{
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		width:auto;padding:0 40px;
		margin:20px auto;
	}
	.examInfo{
		display: flex;
		align-items: center;
	}
	.examInfo b{
		font-weight: normal;
		font-size:14px;
		color:#333;
		position: relative;
		padding-right:14px;
		margin-right:14px;
	}
	.examInfo b i{
		font-style:normal;
		color:#8E96A4
	}
	.examInfo b::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.examInfo b:last-child::after{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.overvcontentTop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24px;
	}
	.overvcontentTop h3{
		font-size:18px;
		font-weight:500;
		padding-bottom:15px;
	}
	.overvcontentTop span{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.tableContent{
		padding:0 24px 30px;
		border-radius: 10px;
		height:calc(100vh - 450px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tableContent::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableContent::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableContent table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableContent table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableContent table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableContent table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableContent table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableContent table tr td:last-child{
		border-right:none;
	}
	.tableContent table tr td i{
		display: block;
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableContent table tr td em{
		display: block;
	}
	.tableContent table tr td span{
		position:relative;
		display: inline-block;
		cursor: pointer;
	}
	.tableContent table tr td span em{
		font-size:12px;
		font-style:normal;
	}
	.tableContent table tr td span::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#000;
	}
	.tableContent table tr td span.green{
		color:#288F41
	}
	.tableContent table tr td span.green::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#288F41;
	}
	.tableContent table tr td span.blue{
		color:#295CFF
	}
	.tableContent table tr td span.blue::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#295CFF;
	}
	.tableContent table tr td span.red{
		color:#EC555A
	}
	.tableContent table tr td span.red::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#EC555A;
	}
	.tableContent table tr td span.gray{
		color:#D8E4F0
	}
	.tableContent table tr td span.gray::after{
		content:'';
		width: 43px;
		height: 1px;
		position:absolute;
		left:50%;
		bottom:-4px;
		transform: translateX(-50%);
		background:#D8E4F0;
	}
	.tableContent table tr:nth-child(3n){
		background:#FAFAFB
	}
	.studentSearch{
		display: flex;
		padding:0 24px 24px;
		justify-content: left;
	}
	.studentSearch .el-select{
		width:124px;
		margin-right:24px;
	}
	.studentSearch >>> .el-input__inner{
		width: 124px;
		border-radius: 10px;
		height:35px;
		font-size:14px;
	}
	.studentSearch >>> .el-input__icon{
		line-height:35px;
	}
	.el-input{
		width:auto;
		margin-right:24px;
	}
	.studentSearch b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
		z-index:100
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
		color:#557292;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.examFootercontent .totaldata em{
		font-style:normal;
		width: 96px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		background: #295CFF;
		text-align: center;
		color:#fff;
		margin-left:14px;
		cursor: pointer;
	}
	.examFootercontent .totaldata em:last-child{
		background:#EC555A;
	}
	.examFootercontent .totaldata >>> .el-pager li.active{
		background-color:#295CFF
	}
	.scorered{
		font-size:14px;
		color:#EC555A;
		padding:24px 0;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		height:25px;
		line-height:25px;
		margin-top:2px;
	}
	.answerlist{
		display: flex;
		align-items: center;
	}
	.smallsubject{
		width: 48px;
		height: 22px;
		font-size:14px;
		text-align: center;
		line-height:22px;
		border-radius: 6px;
		margin:0 5px;
		background: rgba(162,53,113,0.06);
		border: 1px solid rgba(162,53,113,0.5);
		color:#A23571;
	}
	.answerlist li{
		width: 48px;
		height: 22px;
		font-size:14px;
		text-align: center;
		line-height:22px;
		border-radius: 6px;
		margin:0 5px;
	}
	.answerlist li:nth-child(1){
		background: rgba(101,157,113,0.06);
		border: 1px solid rgba(101,157,113,0.5);
		color:#659D71
	}
	.answerlist li:nth-child(2){
		background: rgba(49,121,190,0.06);
		border: 1px solid rgba(49,121,190,0.5);
		color:#3179BE
	}
	.answerlist li:nth-child(3){
		background: rgba(84,62,164,0.06);
		border: 1px solid rgba(84,62,164,0.5);
		color:#543EA4
	}
	.answerlist li:nth-child(4){
		background: rgba(101,157,113,0.06);
		border: 1px solid rgba(101,120,157,0.5);
		color:#65789D
	}
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
		justify-content: center;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.choosestudent{
		display: flex;
		align-items: center;
		padding:10px 0 24px;
	}
	.choosestudent span{
		font-size: 14px;
		color: #557292;
	}
	.choosestudent  >>> .el-input__inner{
		width: 436px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.choosestudent  >>> .el-input__icon{
		line-height:34px;
	}
	.checkbox-group{
		font-size:14px;
		color:#5B6371;
		margin-bottom:20px;
	}
	.el-checkbox{
		margin-bottom:12px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:80px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.addExamContent >>> .el-upload-dragger{
		width:522px;
	}
	.uploadbox{
		width:522px;
		height:220px;
		position:relative;
	}
	.uploadbox a{
		position:absolute;
		right:0;
		bottom:10px;
		font-size:14px;
		color:#295CFF;
	}
	.tableContent >>> .el-button--small{
		font-size:14px;
	}
	.tableContent >>>  .el-table td.el-table__cell div{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>